<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8" />  
    <title>第一个网页</title>
    <style type="text/css">

*{
   
    padding: 0;
    margin: 0;
    border: 0;
    box-sizing: border-box;
    font-size: 14px;
    align:left;
    vertical-align: top;
}   
 .container{
    padding: 0; margin: 0;border: 0;
    display: table;
    width: 100%;
}
.container>.col-1,.container>.col-2,.container>.col-3,.container>.col-4,.container>.col-5,.container>.col-6,
.container>.col-7,.container>.col-8,.container>.col-9,.container>.col-10,.container>.col-11,.container>.col-12
{
    padding: 0; margin: 0;border: 0;
    display: table-cell;
}

.container>.col-1{
    width: 8.33333%;
}
.container>.col-2{
    width: 16.66667%;
}
.container>.col-3{
    width: 25%;
}
.container>.col-4{
    width: 33.33333%;
}
.container>.col-5{
    width: 41.66667%;
}   
.container>.col-6{
    width: 50%;
}    
.container>.col-7{
    width: 58.33333%;
}    
.container>.col-8{
    width: 66.66667%;
}    
.container>.col-9{
    width: 75%;
}    
.container>.col-10{
    width: 83.33333%;
}
.container>.col-11{
    width: 91.66667%;
}
.container>.col-12{
    width: 100%;
}
body{
    background-color: #eeeeee;
}

.layout{
    margin: 5px auto;
    width:900px;
    background-color: #dddddd;
   
}
#header{
    background-color: red;
    height: 110px;
    position: relative;
} 
#workplace{
  min-height: 200px;
}
#footer{
    background-color: #666;
    height: 50px;
    color: #ccc;

}
#header>#caption-info{
    height: 80px;
    padding: 8px;
}
#header>#caption-info>h1{
    font-size: 24px;
    color: white;
}
#header>#caption-info>.user-info{
    text-align: right;
}
#header>#main-menu{
    background-color: black;
    height: 30px;
}
.user-name{
   z-index: 10;
   left:10px;
   top:86px;
   color: white;
}
.topMenu{
    
}

</style>
</head> 
<body>


 
   <div class="layout">
        <div id="header" class="container">
            <div id="caption-info" class="container">
                <h1 class="col-9">我的博客系统</h1>
                <div class="user-info col-3">
                <span class="user-name">CZ position:absolute;left:10px;top:322px;</span>
                <a href="">退出登录</a>
            </div>
        </div>
        <div id="main-menu">
            <ul class="mainMenu">
                <li><span>首页</span></li>
                <li><span>文章</span></li>
                <li id="manage">
                    <span>管理</span>
                    <ul id="manageMenu">
                        <li><span>用户</span></li>
                        <li>
                            <span>基础数据</span>
                            <ul>
                                <span>皮肤管理</span>
                                <span>兴趣管理</span>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
 

    <script type="text/javascript">

    </script>
    <div id="workspace">这是主工作区</div>
    <div id="footer"></div>
    </div>   
   /1 浮动 
   /2 div居中 margin:0 auto;
   /3 盒模型width占据的大小
   /4 层叠
   /5 继承
   /6 选择器 子元素与下级元素

   //盒模型
   //position : static / absolute/relative/fixed;

 



</body>
</html>